<template>
	<view class="wrapper">
		<view>
			<u-tabs-swiper ref="uTabs" :show-bar="true" :gutter="70" :bar-height="1" :bar-width="100"
				active-color="#1296db" :list="libMenu" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in libMenu" :key="index">
				<question-list :list="item.arr"></question-list>
			</swiper-item>
		</swiper>

		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from 'vuex' //引入mapState

	export default {

		data() {
			return {
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},

		computed: mapState(["libMenu"]),

		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},

			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},


			/* 访问Vuex数据 */
			...mapActions([
				'getLibMenu',
				// 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
			])
		},

		onLoad() {
			// this.getLibMenu()
		}
	};
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		height: calc(100vh - 40px);

		display: flex;
		flex-direction: column;

		swiper {
			flex: 1;
		}

	}
</style>